
import Nav from "@/conmpones/nav/index"
import { LeftOutline } from 'antd-mobile-icons'
import { Tabs } from 'antd-mobile'
import "./index.less"
import  Question from "./conmpones/question"
import  ConcernedProblem from "./conmpones/concernedProblem"
import  Answer from "./conmpones/answer"
import  CollectAnswer from "./conmpones/collectAnswer"

import {useState} from "react" 
function QuestionAnsweringManagement() {
    const title = ["提问","关注的问题","回答","收藏的回答","草稿箱"]
    const [activeKey, setActiveKey] = useState("0");
    const elmentTabs = [<Question /> ,<ConcernedProblem /> ,<Answer />,<CollectAnswer />]
    return (

        <div className="main">
            <Nav title="问答管理" left={<LeftOutline />} >
                <div className="title-Left">
                    <img src={require("@/assets/wendaguanli/wdgl_qutiwen@2.png")} alt="" />
                    提问
                </div>
            </Nav>
            <div className="content">
                <div className="tabs">
                <Tabs
                    onChange={(key) => {
                        setActiveKey(key);
                    }}
                    activeKey={activeKey}
                    style={
                        {
                            '--active-line-color': '#FFAD28',
                        }
                    }
                >
                    {
                        title.map((item, index) => {
                             return <Tabs.Tab   title={item} key={index} />
                          })
                    }
                </Tabs>
                </div>
                 <div className="listItem">
                    {elmentTabs[activeKey]}
                 </div>
            </div>
        </div>

    )
}
export default QuestionAnsweringManagement